<template>
  <view class="daolan" v-if="listArr.length">
    <view :style="{ height: screenHeight + 'px' }">
      <map style="width: 750rpx; height: 100%;" :latitude="latitude" :longitude="longitude" :markers="markers" :scale="10"
        enable-poi @markertap="markertap">
      </map>
    </view>
    <u-popup :show="isShowPopup" @close="close" mode="bottom" class="uni_popup" round="10">
      <view class="daohang"></view>
      <view class="contain">
        <view class="top">
          <view class="top_left">
            <view class="title">{{ jingQuInfo.jingquName }}</view>
            <image class="" :src="jingQuInfo.jingquPictureUrl" />
          </view>
          <view class="top_right">
            <view class="time">开园时间：{{ jingQuInfo.jingquOpenTime }}~{{ jingQuInfo.jingquCloseTime }}</view>
            <view class="time">标签：{{ jingQuInfo.jingquTips }}</view>
            <view class="time">位置：{{ jingQuInfo.jingquAddress }}</view>
            <view class="time">距离：{{ jingQuInfo.length }} km
              <uni-icons type="paperplane-filled" size="16" color="#268CFF" @click="naviTo"></uni-icons>
            </view>
          </view>
        </view>
        <view class="bottom">
        </view>
      </view>

    </u-popup>
  </view>
</template>

<script>
import { distance } from "@/utils/countFun";

import {
  getListJingQu, // 获取所有景区列表
  getDetailsByJingquIdAPI
} from "@/api/jingqu";

export default {
  components: {},
  data() {
    return {
      screenHeight: 0,
      listArr: [],
      id: 0, // 使用 marker点击事件 需要填写id
      title: 'map',
      latitude: 0,
      longitude: 0,
      markers: [],
      includePoints: [],
      isShowPopup: false,
      jingQuInfo: {},
      userlat: 0,
      userlon: 0,
    }
  },

  onLoad() {
    this.getUserLocation();
  },

  onReady() {
  },

  methods: {
    // 导航
    naviTo() {
      let latitude = Number(this.jingQuInfo.lat);
      let longitude = Number(this.jingQuInfo.lon);
      let name = this.jingQuInfo.jingquName;
      let address = this.jingQuInfo.jingquAddress;

      setTimeout(() => {
        uni.openLocation({
          latitude,
          longitude,
          scale: 15,
          name,
          address,
          complete(res) {
            uni.hideLoading();
            console.log(res);
          },
        });
      }, 100);
    },

    // 获取用户经纬度
    getUserLocation() {
      let self = this;
      uni.getLocation({
        type: "gcj02",
        isHighAccuracy: true,
        success(res) {
          console.log(res);
          self.userlat = res.latitude;
          self.userlon = res.longitude;
          self.getAllList();
        },
        fail(err) {
          console.log(err)
          self.getAllList();
        },
      });
    },

    // 获取所有景区列表
    getAllList() {
      getListJingQu()
        .then((res) => {
          if (res.code === 200) {
            if (res.data) {
              this.screenHeight = uni.getSystemInfoSync().windowHeight;
              this.latitude = Number(res.data[0].lat);
              this.longitude = Number(res.data[0].lon);
              this.markers = res.data.map((v) => {
                console.log(v)
                return {
                  id: v.jingquId,
                  latitude: Number(v.lat),
                  longitude: Number(v.lon),
                  // iconPath: v.jingquPictureUrl,
                  width: 36,
                  height: 36,
                  // 自定义标记点上方的气泡窗口
                  callout: {
                    content: v.jingquName,
                    color: "#000",
                    borderRadius: 2,
                    borderWidth: 2,
                    borderColor: "#fff",
                    bgColor: "#fff",
                    padding: 4,
                    display: "ALWAYS"
                  }
                }
              });
              this.includePoints = res.data.map((v) => {
                return {
                  latitude: Number(v.lat),
                  longitude: Number(v.lon)
                }
              });

              setTimeout(() => {
                this.listArr = res.data;
              }, 1);
            }
          } else {
            this.listArr = [];
          }
        })
        .catch((err) => {
          console.log(err)
          this.listArr = [];
        });
    },

    markertap(e) {
      if (e.detail.markerId) {
        let self = this;
        let jingquId = e.detail.markerId;
        let lat = null, lon = null;

        for (let i = 0; i < this.listArr.length; i++) {
          if (this.listArr[i].jingquId == jingquId) {
            lat = this.listArr[i].lat;
            lon = this.listArr[i].lon;
            break;
          }
        }

        getDetailsByJingquIdAPI(jingquId)
          .then((res) => {
            if (res.code === 200) {
              this.isShowPopup = true;
              this.jingQuInfo = res.data;
              this.jingQuInfo.lat = lat;
              this.jingQuInfo.lon = lon;
              this.jingQuInfo.length = distance(
                Number(lat),
                Number(lon),
                self.userlat,
                self.userlon
              );
            }
          })
          .catch((err) => {
            console.log(err)
          });
      }
    },

    close() {
      this.isShowPopup = false;
      this.jingQuInfo = {};
    }
  },
};
</script>

<style lang="scss" scoped>
::v-deep .u-popup__content {
  padding: 10rpx;
}

.daolan {
  background-color: #F3F3F3;
  width: 750rpx;
  height: 100vh;
  color: #000;


  .close {
    width: 60rpx;
    height: 60rpx;
    background: #fff;
    border-radius: 8rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .daohang {}

  .contain {
    width: 100%;
    height: 100%;
    background: #fff;
    padding: 10rpx;

    .top {
      display: flex;

      .top_left {
        margin-right: 24rpx;

        .title {
          font-size: 30rpx;
          font-weight: bold;
          margin-bottom: 10rpx;
        }

        image {
          width: 250rpx !important;
          height: 190rpx !important;
          border-radius: 20rpx !important;
        }
      }

      .top_right {
        .time {
          margin: 5rpx 0;
        }
      }
    }

    .bottom {}
  }
}
</style>
